import { createVNode,render } from "vue";

//1.导入组件
import XtxConfirm from "./xtx-confirm.vue";

//2.准备一个DOM节点容器 添加class类名  插入页面
const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(div)

//3.定义一个函数调用的方法 要求返回的是一个Promise  点取消/点确认 都要销毁组件
export default ({ title, text }) => {
  return new Promise((resolve, reject) => {

    //点击确定
    const submitCallback = () => {
      render(null, div); //销毁
      resolve()
    }
    //点击取消
    const cancelCallback = () => {
      render(null, div); //销毁
      reject(new Error('点击取消'))
    }


    //4.利用vue提供的createVNode(组件，{props属性}) 方法创建虚拟节点
    const vn = createVNode(XtxConfirm, { title, text,submitCallback, cancelCallback});

    //5.利用vue提供的render(将要被渲染的虚拟节点，渲染到该容器)方法 将虚拟节点渲染到DOM节点中
    render(vn, div);
  });
};
